<template>
  <div class="comment">
      <a href="#" class="pic">
        <img :src="item.icon" alt="">
      </a>
      <div class="comment-body">
        <a href="#" class="username">{{item.username}}</a>
        <div class="comment-time">{{item.ctime}}</div>
        <div class="comment-like">{{item.like_num}}</div>
        <div class="comment-content">
          {{item.comment_content}}
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props:['item']
}
</script>

<style lang="stylus">
.comment
  margin .12rem 0
  padding 0 .1rem 0 .62rem
  font-size .14rem
  position relative
  &:last-of-type:after
    display none
  &:after
    content ""
    display block
    position absolute
    bottom 0
    right 0
    left .62rem
    border-bottom 1px solid #e0e0e0
  .pic
    display block
    width .4rem
    height .4rem
    position absolute
    top 0
    left .1rem
    border-radius 50%
    img 
      width 100%
      height 100%
      border-radius 50%
  .comment-body
    position relative
    padding 0.03rem 0 0.12rem
    .username
      display block
      color #757575
      font-size .12rem
      height .14rem
      line-height .14rem
    .comment-time
      font-size .11rem
      color #b3b3b3
      height .14rem
      line-height .14rem
    .comment-like
      position absolute
      top 0.05rem
      right 0
      height .16rem
      line-height .16rem
      padding-left .2rem
      font-size .11rem
      color #757575
      cursor pointer
      &:before
        content ""
        position absolute
        top -0.01rem
        left 0
        width .16rem
        height .16rem
        background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png')
        background-position -0.94rem -0.74rem
        background-size 2.62rem 2.34rem
</style>